縱覽

接下來，要使用軟體將之前畫的紙上原型實現成簡單線稿，可能會花個三天慢慢做。

prototype 軟體其實蠻多的，像是sketch/ figma，我會選擇 Adobe XD 的原因是整合做得非常好，可以自由的在 XD 裡面選取圖片，放到 Photoshop 裡面編輯亮度，他的整合平台 Adobe Cloud也非常的完整，使用的快捷鍵也是我很熟悉的，上手容易（我今年二月才學會）。

簡單拉完版大概就是長這樣，大家參考一下

topbar + nav

這部分我會選擇只留下搜尋框和一些基本資訊，把社群放到 footer ，warning 放在醒目的標題下方，會比他應是塞在 topbar 更合適一點。

兩個導覽列（重要的我放了但忘記截圖XD），另外一個使用 breadcrumb 把它收好。

timeline

即時天氣地圖可以自由地設定預測日期，所以我設計了一個時間軸，比起之前參考的法國氣象局會更直觀一點。

至於群眾揭露（Public observation），因為國家民情不同，依靠民眾舉報的重要性在印度也許十分高，我設想 user 對於這個功能只有兩種狀況，第一種是完全不會用到，第二種是使用急迫性較高（土石流或山洪）。

所以我希望他要很清晰地被看到，但又不會遮擋視線，會用一個小小的icon浮動式的放在網頁角落，讓人可以即時舉報。

思考了一下timeline的位置，放在下方不符合非本日的預報使用動線（確認地點 -> 確認日期 -> 查看細節），所以我會放在上方。

news

新聞試了幾個版本，最新預報重要性仍是勝過新聞連結，主要是因為連結還要多點進去，決定要放在左邊。

forecast

預報這裡做的處理比較多，因為很多繁複的資訊都放在裡面，所以我分別點進去研究了一下，並將它分類。

有四項屬於跟「雨量」有關的，兩項是跟「季風」有關係的，兩項跟「颱風」有關，剩下的是完全無關，甚至民眾也非常少用到的。

還有一點，我研究這些名字完全不能理解它在做什麼，除非一個個點進去。

考慮到頁面長度與視覺負荷，我會選擇設計四個 TAB ，讓 user 選擇他今天是要看哪一種的資訊，點進去之後會看到 description ，等到確認這一個系統裡面的使用方式是他需要的，最後再進入。

希望這樣子能夠減少一個一個的試錯。

footer

我只有列三欄，第一項是相關的網站，舉凡各區的網站或是比較大型的國家官方網站都放在這裡。

中間是4個產品，最右邊是聯絡方式、網站地圖、QA，底下是目標 user 極少極少用到的 LINK，像是資料庫登入登出，就全部塞在最底下。

今天喘喘氣，下篇講一下字體、版面、icon 相關的 style guide~